<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('基金')" prop="name">
        <el-select v-model="fundId" :placeholder="$t('基金')" @change="changeFund">
          <el-option v-for="fund in fundBaseList" :key="fund.id" :value="fund.id" :label="fund.fundName" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="15">
      <el-col :span="8">
        <div class="box-shadow-list pad15 mr10">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">{{ $t('按行业分类') }}</span>
            <div class="chartBtn">
              <el-select v-model="industry" size="mini" style="width: 100px;margin-top: -4px;" @change="onChange(industry, '1')">
                <el-option :label="$t('投资成本')" value="invest" />
                <el-option :label="$t('最新估值')" value="valuation" />
              </el-select>
            </div>
          </div>
          <div style="height:300px;position: relative;">
            <pieChart v-if="chartData1.datas.length > 0" :chart-data="chartData1" height="100%" @xData="handleTooltipClick($event, '1')" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box-shadow-list pad15 mr10">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">{{ $t('投资类型') }}</span>
            <div class="chartBtn">
              <el-select v-model="investType" size="mini" style="width: 100px;margin-top: -4px;" @change="onChange(investType, '2')">
                <el-option :label="$t('投资成本')" value="invest" />
                <el-option :label="$t('最新估值')" value="valuation" />
              </el-select>
            </div>
          </div>
          <div style="height:300px;position: relative;">
            <pieChart v-if="chartData2.datas.length > 0" :chart-data="chartData2" height="100%" @xData="handleTooltipClick($event, '2')" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box-shadow-list pad15">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">{{ $t('按地域分类') }}</span>
            <div class="chartBtn">
              <el-select v-model="area" size="mini" style="width: 100px;margin-top: -4px;" @change="onChange(area, '3')">
                <el-option :label="$t('投资成本')" value="invest" />
                <el-option :label="$t('最新估值')" value="valuation" />
              </el-select>
            </div>
          </div>
          <div style="height:300px;position: relative;">
            <pieChart v-if="chartData3.datas.length > 0" :chart-data="chartData3" height="100%" @xData="handleTooltipClick($event, '3')" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="list-table mt20">
          <el-table
            v-loading="loading"
            tooltip-effect="darkTable"
            :data="dealBaseList"
            border
            stripe
            :row-style="rowStyle"
            @sort-change="dataSort"
          >
            <el-table-column sortable="custom" :label="$t('项目名称')" align="center" prop="dealName" min-width="140" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <router-link
                  v-if="scope.row.dealName !== '合计'"
                  :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId, companyId: scope.row.companyId}}"
                  target="_blank"
                  class="link_a"
                >
                  <span>{{ scope.row.dealName }}</span>
                </router-link>
                <span v-else>{{ scope.row.dealName }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('投资时间')" align="center" prop="firstSchemeTime" min-width="120" />
            <el-table-column sortable="custom" :label="$t('行业')" align="center" prop="industry" min-width="160" show-overflow-tooltip />
            <el-table-column sortable="custom" :label="$t('最新持股比例%')" align="center" prop="holdRate" min-width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.holdRate || scope.row.holdRate === 0 ? scope.row.holdRate.toFixed(2) : scope.row.holdRate }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column :label="$t('目前持股比例%')" align="center" prop="curRate" min-width="120" />-->
            <el-table-column sortable="custom" :label="$t('投资成本') + $t('金额单位')" align="center" prop="investAmount" min-width="130">
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.investAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('累计回款')+$t('金额单位')" align="center" prop="collectionAmount" min-width="130">
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.collectionAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('估值')+$t('金额单位')" align="center" prop="valuationAmount" min-width="130">
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.valuationAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column sortable="custom" :label="$t('MOIC')" align="center" prop="moic" min-width="100" :formatter="calcMoic" />
            <el-table-column sortable="custom" :label="$t('IRR')" align="center" prop="irr" min-width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.irr || scope.row.irr === 0 ? scope.row.irr.toFixed(2) : scope.row.irr }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column :label="$t('最新情况')" align="center" prop="lastSit" min-width="100">-->
            <!--              <template>-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#f2dc4b;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#f2b34a;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#e9753c;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#67c765;vertical-align: middle;margin-top: 2px" />-->
            <!--                <span style="display: inline-block;width: 10px;height: 18px;border-radius: 3px;background:#e95a3a;vertical-align: middle;margin-top: 2px" />-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryDealBase.pageNum"
            :limit.sync="queryDealBase.pageSize"
            @pagination="getDealList(queryDealBase.name,queryDealBase.value)"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDealBaseListByFundId, getFundList } from '@/api/fund/fundBase'
import { Decimal } from 'decimal.js'
import { getCharts } from '@/api/fund/fundBase'
import pieChart from '@/views/chart/pieChart'
export default {
  components: {
    pieChart
  },
  data() {
    return {
      loading: true,
      total: 0,
      queryParams: {},
      investType: 'invest',
      industry: 'invest',
      area: 'invest',
      dealBaseList: [
        {
          'dealId': '40b524e5e32f496aab30b4adba1a10c4',
          'dealName': '京北方信息技术股份有限公司',
          'firstSchemeTime': '2024-03-27',
          'industry': '大数据及人工智能',
          'stage': null,
          'holdRate': null,
          'investAmount': 500000,
          'collectionAmount': 150000,
          'valuationAmount': 713104,
          'moic': 0.5146,
          'irr': null,
          'lastSit': null,
          'companyId': 'cdb79e94666a4fffa5b3bf6c2e558ba5'
        },
        {
          'dealId': '8ca5fc7dcab8495881881dd63dec8735',
          'dealName': '中国移动通信集团有限公司',
          'firstSchemeTime': '2024-03-27',
          'industry': '大数据及人工智能',
          'stage': null,
          'holdRate': null,
          'investAmount': 2101122,
          'collectionAmount': 501234,
          'valuationAmount': 2307945,
          'moic': 1.337,
          'irr': null,
          'lastSit': null,
          'companyId': 'd9f7b0d269fd43f487e688620460a34d'
        },
        {
          'dealName': '合计',
          'firstSchemeTime': null,
          'industry': null,
          'stage': null,
          'holdRate': null,
          'investAmount': 2601122,
          'collectionAmount': 651234,
          'valuationAmount': 3021049,
          'moic': 1.41,
          'irr': null,
          'lastSit': null,
          'companyId': null
        }
      ],
      chartName: undefined,
      queryDealBase: {
        name: undefined,
        value: undefined,
        order: undefined,
        prop: undefined,
        fundId: undefined,
        pageNum: 1,
        pageSize: 10
      },
      fundIrr: 0,
      fundId: undefined,
      fundBaseList: [],
      chartData1: {
        valueFormatter: true,
        datas: []
      },
      chartData2: {
        valueFormatter: true,
        datas: []
      },
      chartData3: {
        valueFormatter: true,
        datas: []
      }
    }
  },
  created() {
    this.initFundBase()
  },
  methods: {
    initFundBase() {
      getFundList({}).then(res => {
        this.fundBaseList = []
        this.fundBaseList = this.fundBaseList.concat(res.rows)
        if (!this.fundId && this.fundBaseList.length > 0) {
          this.$set(this, 'fundId', this.fundBaseList[0].id)
        }
        // this.getDealList(null, null)
        this.queryDealBase.pageNum = 1
        this.changeFund(true)
      })
    },
    handleTooltipClick(params, key) {
      // console.log(params, key)
      var type = ''
      if (key === '1') {
        type = 'industry'
      } else if (key === '2') {
        type = 'investType'
      } else if (key === '3') {
        type = 'area'
      }
      this.queryDealBase.pageNum = 1
      if (this.chartName !== params.name) {
        this.getDealList(type, params.nodeValue)
        this.chartName = params.name
      } else {
        this.getDealList(null, null)
        this.chartName = undefined
      }
    },
    onChange(type, key, is) {
      var fundId = this.fundId || 'all'
      if (key === '1') {
        getCharts(fundId, 'industry', { type: type }).then(res => {
          this.chartData1.datas = res.data || []
          this.chartData1.center = ['50%', '40%']
          this.chartData1.legend = true
          this.chartData1.datas.forEach(item => {
            item.name = item.nodeName
          })
        })
      } else if (key === '2') {
        getCharts(fundId, 'investType', { type: type }).then(res => {
          this.chartData2.datas = res.data || []
          this.chartData2.center = ['50%', '40%']
          this.chartData2.legend = true
          this.chartData2.datas.forEach(item => {
            item.name = item.nodeName
          })
        })
      } else if (key === '3') {
        getCharts(fundId, 'area', { type: type }).then(res => {
          this.chartData3.datas = res.data || []
          this.chartData3.center = ['50%', '40%']
          this.chartData3.legend = true
          this.chartData3.datas.forEach(item => {
            item.name = item.nodeName
          })
        })
      }
      if (!is) {
        this.getDealList(null, null)
      }
      this.chartName = undefined
    },
    getDealList(type, typeValue) {
      this.queryDealBase.name = type
      this.queryDealBase.value = typeValue
      this.queryDealBase.fundId = this.fundId || 'all'
      this.loading = true
      getDealBaseListByFundId(this.queryDealBase).then(res => {
        this.total = res.total
        // if (res.data) {
        //   res.data.push(this.getSummaries(res.data))
        // }

        this.dealBaseList = res.rows
        this.loading = false
      })
    },
    changeFund(is) {
      this.onChange(this.industry, '1', is)
      this.onChange(this.investType, '2', is)
      this.onChange(this.area, '3', is)
      this.getDealList(null, null)
    },
    rowStyle({ row }) {
      if (row.dealName === '合计') {
        var style = {
          'font-weight': 'bolder'
        }
        return style
      } else {
        return {}
      }
    },
    getSummaries(rows) {
      var investAmount = new Decimal(0)
      var collectAmount = new Decimal(0)
      var valutionAmount = new Decimal(0)
      var moic = 0
      console.log(this.fundIrr, '基金IRR')

      var irr = this.fundIrr
      rows.forEach(item => {
        investAmount = investAmount.add(new Decimal(Number(item.investAmount)))
        collectAmount = collectAmount.add(new Decimal(Number(item.collectionAmount)))
        valutionAmount = valutionAmount.add(new Decimal(Number(item.valuationAmount)))
      })

      console.log(investAmount, collectAmount, valutionAmount)

      var row = {
        dealName: '合计',
        investAmount: investAmount.toNumber(),
        collectionAmount: collectAmount.toNumber(),
        valuationAmount: valutionAmount.toNumber()
      }

      moic = this.calcMoic(row)
      row.moic = moic
      row.irr = irr
      return row
    },
    calcMoic(row) {
      if ((row.investAmount || row.investAmount === 0) && (row.collectionAmount || row.collectionAmount === 0) && (row.investAmount)) {
        var valution = new Decimal(row.valuationAmount)
        valution = new Decimal(valution.add(row.collectionAmount))
        var num = valution.div(row.investAmount)
        return num.toFixed(2)
      }
      return ''
    },
    // 排序
    dataSort(column) {
      this.loading = true
      if (column.order !== null && column.order !== undefined && column.order !== '') {
        this.queryDealBase.prop = column.prop
        if (column.order === 'ascending') {
          this.queryDealBase.order = 'asc'
        } else if (column.order === 'descending') {
          this.queryDealBase.order = 'desc'
        }
      } else {
        this.queryDealBase.prop = undefined
        this.queryDealBase.order = undefined
      }
      this.getDealList(this.queryDealBase.name, this.queryDealBase.value)
    }
  }
}
</script>

<style scoped lang="scss">
// /deep/.list-table {
//   .el-table--border{
//     border: 1px solid #8377f7 !important;
//   }
//   .el-table{
//     border-radius: 5px;
//     border-color: #8377f7;
//     table{
//       border-radius: 5px;
//       border-color: #8377f7;
//     }
//     thead th{
//       background-color: #8377f7 !important;
//       border: none !important;
//       color: #fff !important;
//     }
//     tr,td{
//       border: none !important;
//     }
//   }
// }
</style>
